<template>
  <div>
    <nav-bar>
      <img
        class="left"
        @click="$router.back()"
        src="../../../assets/img/navbar/ic_title_back.png"
        slot="left"
        alt=""
      />
      <span slot="center">
        <span v-show="hasPwd">修改{{title}}密码</span>
        <span v-show="!hasPwd">设置{{title}}密码</span>
      </span>
    </nav-bar>
    <div class="content_box content_scroll">
      <van-field
        v-model="password"
        :type="passwordType01"
        placeholder="请输入原始密码"
        class="van_field"
        maxlength="30"
        v-show="hasPwd"
        :right-icon="iconEye01"
        @click-right-icon="iconChange(1)"
      />
      <van-field
        v-model="newPassword01"
        :type="passwordType02"
        placeholder="请输入新密码"
        class="van_field"
        maxlength="30"
        :right-icon="iconEye02"
        @click-right-icon="iconChange(2)"
      />
      <van-field
        v-model="newPassword02"
        :type="passwordType03"
        placeholder="请再次输入新密码"
        class="van_field"
        maxlength="30"
        :right-icon="iconEye03"
        @click-right-icon="iconChange(3)"
      />
      <p class="text-tips">(由8-30位数字与字母组成！不可以用纯数字或纯字母)</p>
      <van-button round type="info" class="button" @click="onConfirm"
        >确认修改</van-button
      >
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import NavBar from '../../../components/common/navbar/NavBar.vue';
import { getCashPwd } from '../../../network/home';
import {homeData} from '../../../common/common'
export default {
  components: { NavBar },
  data() {
    return {
      type: null,
      passwordType01: 'password',
      passwordType02: 'password',
      passwordType03: 'password',
      password: '',
      newPassword01: '',
      newPassword02: '',
      hasPwd: null,
      title: '',
      iconEye01: require('../../../assets/img/login/icon_close_grey.png'),
      iconEye02: require('../../../assets/img/login/icon_close_grey.png'),
      iconEye03: require('../../../assets/img/login/icon_close_grey.png'),
    };
  },
  created () {
    if (this.$route.query.title === 'cash') {
      this.type = 3
      this.hasPwd = this.userinfo.has_tx_pwd
      this.title = '提现'
    }else if (this.$route.query.title === 'payment') {
      this.type = '2'
      this.hasPwd = this.userinfo.has_g_pwd
      this.title = '支付'
    }
  },
  methods: {
    onConfirm() {
      getCashPwd(
        this.type,
        this.password,
        this.newPassword01,
        this.newPassword02
      ).then((res) => {
        if (res.state === 'ok') {
          this.password = ''
          this.newPassword01 = ''
          this.newPassword02 = ''
          if(res.msg === '操作成功') {
            homeData()
          }
          this.$toast(res.msg)
          this.$router.back()
        } else if (res.state === 'err') {
          if (res.msg === 'no_login') {
            this.$toast(res.msg)
            this.$router.replace('/login')
          } else {
            this.$toast(res.msg)
          }
        }
      });
    },
    iconChange(val) {
      if (val === 1) {
        if (this.passwordType01 === 'password') {
          this.passwordType01 = 'text'
          this.iconEye01 = require('../../../assets/img/login/icon_open_grey.png')
        }else {
          this.passwordType01 = 'password'
          this.iconEye01 = require('../../../assets/img/login/icon_close_grey.png')
        }
      }else if (val === 2) {
        if (this.passwordType02 === 'password') {
          this.passwordType02 = 'text'
          this.iconEye02 = require('../../../assets/img/login/icon_open_grey.png')
        }else {
          this.passwordType02 = 'password'
          this.iconEye02 = require('../../../assets/img/login/icon_close_grey.png')
        }
      }else if (val === 3) {
        if (this.passwordType03 === 'password') {
          this.passwordType03 = 'text'
          this.iconEye03 = require('../../../assets/img/login/icon_open_grey.png')
        }else {
          this.passwordType03 = 'password'
          this.iconEye03 = require('../../../assets/img/login/icon_close_grey.png')
        }
      }
    }
  },
  computed: {
    ...mapState([
      'userinfo'
    ])
  }
};
</script>

<style scoped>
.left {
  width: 44px;
  height: 44px;
}

.content_box {
  width: 610px;
  padding: 40px 70px;
}

.van_field {
  font-size: 28px;
  width: 610px;
  height: 75px;
  line-height: 75px;
  border-radius: 44px;
  border: 1px solid #999;
  padding: 0 30px 0 30px;
  margin-bottom: 30px;
}

.button {
  width: 610px;
  height: 75px;
  font-size: 28px;
}

.text-tips {
  font-size: 24px;
  padding: 0 0 60px 0;
  color: blue;
  text-align: center;
}
</style>
